<template>
    <el-container class="elNode">
        <el-header style="position: fixed;z-index: 9;width: 100%">
            <h1 class="title">
                        <span style="color: #5f5b5b">
                            当前位置 ：
                        </span>
                <span v-if="canEdit|| !di" @click="to(HomePage)" style="cursor:pointer">通信数据调查<i
                        class="el-icon--right el-icon-right"></i></span>
                <span v-else @click="to(DiPage)" style="cursor:pointer">通信调查数据入库<i
                        class="el-icon--right el-icon-right"></i></span>
                通信调查点数据
            </h1>
        </el-header>
        <el-main style="background: #F0F0F066;margin-top:45px">
            <el-row>
                <el-col :span="24">
                    <el-row :gutter="10">
                        <el-card>
                            <h1 style="font-size: 1.4em">{{this.title}}调查点列表</h1>
                            <node-table :table-data="tableData" :can-edit="canEdit" @updateData="updateData"
                                        :cur-page="curPage"></node-table>
                            <el-divider></el-divider>
                            <admin-page :page-size="pageSize" ref="adminPage" @updateData="updateData"
                                        :total="total" @currentChange="currentChange"/>
                        </el-card>
                        <el-card style="height: 60px" v-if="canEdit">
                            <el-col :span="4">
                                <h1 style="font-size: 1.4em">新增调查点</h1>
                            </el-col>
                            <el-col :span="4" :push="1">
                                <el-upload
                                        class="upload-demo"
                                        ref="uploadNode"
                                        name="nodeFile"
                                        action="777"
                                        drag
                                        :file-list="fileList"
                                        :limit="1"
                                        :on-error="uploadFalse"
                                        :auto-upload="true"
                                        :http-request="uploadNodeFile"
                                >
                                    <div class="el-button--primary" v-loading.fullscreen.lock="fullscreenLoading"
                                         style="height: 100%;font-weight: 500;font-size: 12px;padding: 7px 14px;">批量添加
                                    </div>
                                </el-upload>
                            </el-col>
                            <el-col :span="4" :push="1">
                                <el-button class="el-button--primary" v-if="fileList.length === 1">提交</el-button>
                            </el-col>
                            <el-col :span="4" :push="1">
                                <el-button class="el-button--primary el-button--mini" @click="dialogVisible = true">
                                    单个添加
                                </el-button>
                            </el-col>
                            <tips-dialog @yes="addSuccess" :dialog-visible="dialogVisible2"
                                         :msg="msg"></tips-dialog>
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
            <el-dialog
                    title="新增通信调查点"
                    :visible.sync="dialogVisible"
                    width="48%"
                    v-if="dialogVisible"
                    :before-close="handleClose">
                <new-node ref="NewNode" @updateData="updateData" :type="type"></new-node>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                     <el-button type="primary" @click="submitForm"
                                v-loading.fullscreen.lock="fullscreenLoading">保 存</el-button>
                </span>
            </el-dialog>
        </el-main>
    </el-container>
</template>

<script>
    import NodeTable from "../../../../components/admin/table/NodeTable";
    import NewNode from "../../../../components/admin/form/NewNode";
    import AdminPage from "../../../../components/admin/menu/AdminPage";
    import TipsDialog from "../../../../components/admin/menu/TipsDialog";
    import qs from "qs";

    export default {
        name: "Node",
        components: {
            AdminPage,
            NodeTable,
            NewNode,
            TipsDialog
        },
        data() {
            return {
                msg: '添加完成',
                dialogVisible: false,
                dialogVisible2: false,
                tableData: [],
                HomePage: 'CorrespondTl',
                DiPage: 'CorrespondDi',
                beginPos: '',
                curPage: 1,
                pageCount: 6,
                pageSize: 10,
                total: 0,
                type: -1,
                di: false,
                title: '',
                fileData: '',  // 文件上传数据（多文件合一）
                fileList: [],
                fullscreenLoading: false,
                canEdit: true
            }
        },
        mounted() {
            if (this.$route.params.id !== undefined) {
                this.type = this.$route.params.id;
                this.updateData(this.curPage);
                axios.post("/bjdzms/releaseTask/findById",
                    qs.stringify({
                        'id': this.type
                    })).then(res => {
                   this.title = res.data.taskName;
                                   if (res.data.state !== 7) {
                        this.canEdit = true;
                    } else {
                        this.canEdit = false;
                    }
                });
            }
            if (this.$route.params.di !== undefined) {
                this.di = true;
            }
        },
        methods: {
            addSuccess() {
                this.updateData();
                this.fileList = [];
                this.dialogVisible2 = false;
            },
            uploadNodeFile(file) {
                this.fullscreenLoading = true;
                this.fileData = new FormData();
                this.fileData.append('file', file.file);
                this.fileData.append('type', this.type);
                axios.post('/bjdzms/releaseTask/upExcel',
                    this.fileData,
                ).then(res => {
                    if (res.status === 200) {
                        this.uploadSuccess(res);
                    } else {
                        this.uploadFalse();
                    }
                });
            },
            //文件上传成功触发
            uploadSuccess(response) {
                if (response.data) {
                    this.fullscreenLoading = false;
                    this.dialogVisible2 = true;
                } else {
                    this.$message({
                        message: '导入失败',
                        type: 'error'
                    });
                }
            },
            //文件上传失败触发
            uploadFalse() {
                this.$message({
                    message: '文件上传失败！',
                    type: 'error'
                });
            },
            // 上传前对文件的大小和类型的判断
            beforeAvatarUpload(file) {
                this.form.fileName = file.name;
                const extension = file.name.split(".")[1] === "xls";
                const extension2 = file.name.split(".")[1] === "xlsx";
                const extension3 = file.name.split(".")[1] === "txt";
                if (!extension && !extension2 && !extension3) {
                    this.$message({
                        message: '上传文件只能是 xls、xlsx、txt 格式!',
                        type: 'error'
                    });
                }
                return extension || extension2 || extension3;
            },
            currentChange(curPage) {
                this.updateData(curPage);
            },
            updateData(curPage) {
                this.pageSize = this.$refs.adminPage.pageSize;
                this.curPage = curPage === undefined ? this.curPage : curPage;
                axios.get("/bjdzms/releaseSubtask/findAllByType",
                    {
                        params: {
                            'page': this.curPage,
                            'rows': this.pageSize,
                            'type': this.type
                        }
                    }).then(res => {
                    this.tableData = [];
                    this.tableData = res.data.rows;
                    this.beginPos = res.data.beginPos;
                    this.currPage = res.data.currPage;
                    this.pageCount = res.data.pageCount;
                    this.total = res.data.total;
                });
                this.dialogVisible = false;
                this.fullscreenLoading = false;
            },
            to(path) {
                this.$router.push({name: path});
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            submitForm() {
                this.$refs.NewNode.submitForm();
                this.fullscreenLoading = true;
            },
            onCancel(form) {
                this.$refs.uploadNode.clearFiles();
                this.dialogVisible2 = false;
            }
        }
    }
</script>
<style>
    .elNode .upload-demo {
        width: 100px !important;
    }

    .elNode .el-upload-dragger {
        width: 85px;
        height: 30px !important;
    }
</style>

<style scoped>
    .el-header {
        background: #EBEBEB;
        color: #e5e9ef;
        font-size: 2em;
        line-height: 80px;
        border: 5px solid #EBEBEB;
    }

    .el-main {
        background: #fff;
    }

    .el-container {
        height: 100%;
    }

    .el-form-item {
        width: 610px;
    }

    .el-upload__text {
        width: 110px;
    }

    .node {
        height: 100%;
        width: 100px;
    }

    .title {
        font-size: 14px;
        color: #97a8be;
        font-weight: 400 !important;
    }
</style>
